 <template>
    <div>
        <addInvetory @updData="getData" :form="formData"></addInvetory>
        <pagination :pagination="formData" @currpage="getData" float="right" :total="total"></pagination>
        <el-table
            ref="table"
            :data="tableData"
            :header-cell-style="getRowClass"
            v-loading="loading"
            border
            style="width: 100%"
        >
            <el-table-column prop="invoiceNumber" label="发票号">
                <template slot-scope="scope">
                    <div
                        @click="onPreview(scope.row)"
                        class="preview"
                        v-if="scope.row.fileUrl"
                    >{{scope.row.invoiceNumber}}</div>
                    <div v-else>{{scope.row.invoiceNumber}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="rName" :label="formData.typeId ===  2?'申请人':'报销人'"></el-table-column>
            <el-table-column prop="billingCompany" label="开票公司" v-if="formData.typeId === 2"></el-table-column>
            <el-table-column prop="rTime" label="开票日期">
                <template slot-scope="scope">{{scope.row.rTime | formatDate}}</template>
            </el-table-column>
            <el-table-column prop="rTime" label="创建日期">
                <template slot-scope="scope">{{scope.row.cTime | formatDate}}</template>
            </el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    <el-alert
                        :title="scope.row.status | status"
                        :type="scope.row.status | statusType"
                        style="height:30px"
                        :closable="false"
                    ></el-alert>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="160">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        size="mini"
                        @click="onPreview(scope.row,'check')"
                        v-if="[124,154,157,159].indexOf($store.getters.userId) !== -1"
                    >审核</el-button>
                    <el-button
                        type="danger"
                        size="mini"
                        @click="Delete(scope.row,'check')"
                        :disabled="$store.getters.userId === scope.row.cUser && scope.row.status  === 1"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="overflow: auto;">
            <pagination :pagination="formData" @currpage="getData" float="right" :total="total"></pagination>
        </div>
        <scrollTable ref="scrollTable"></scrollTable>
        <el-dialog
            :title="'发票号：'+fileItem.invoiceNumber + '　报销人：' + fileItem.rName"
            :visible.sync="showViewer"
            width="800"
        >
            <div v-if="fileItem.fileUrl ">
                <el-image
                    :src="fileItem.fileUrl"
                    v-if="RegExp('.(' + ['jpg', 'png', 'jpeg'].join('|') + ')$', 'i').test(fileItem.fileUrl.toLowerCase())"
                ></el-image>
                <iframe
                    v-else
                    :src="fileItem.fileUrl"
                    frameborder="0"
                    width="100%"
                    height="500px"
                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen
                ></iframe>
            </div>
            <div v-else>暂时没有数据</div>
            <div slot="footer" class="dialog-footer" v-if="check">
                <el-button @click="isUpdate(-1)" size="small">不通过</el-button>
                <el-button type="primary" @click="isUpdate(1)" size="small">通过</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  <script>
import pagination from "components/pagination";
import scrollTable from "components/scroll/scroll-table.vue";
import addInvetory from "./addInvetory";
import { formatDate } from "assets/js/date";
const ERR_OK = 200;
export default {
    data() {
        return {
            tableData: [],
            formData: {},
            loading: true,
            total: 1,
            showViewer: false,
            fileItem: {},
            check: false
        };
    },
    filters: {
        formatDate(data) {
            var date = new Date(data.substr(0, 19));
            return formatDate(date, "yyyy-MM-dd");
        },
        status(key) {
            switch (key) {
                case 0:
                    return "待审核";
                    break;
                case 1:
                    return " 审核通过";
                    break;
                default:
                    return "审核未通过 ";
                    break;
            }
        },
        statusType(key) {
            switch (key) {
                case 1:
                    return "success";
                    break;
                case 0:
                    return " info";
                    break;
                default:
                    return "warning";
                    break;
            }
        }
    },
    methods: {
        onPreview(item, check) {
            this.fileItem = item;
            this.showViewer = true;
            if (check) {
                this.check = true;
            } else {
                this.check = false;
            }
        },
        Delete(item) {
            this.$confirm("是否确定删除", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.$ajax({
                        method: "post",
                        url: this.GLOBAL.oaService + "/invoice/delete",
                        data: {
                            delUser: this.$store.getters.userId,
                            id: item.id
                        }
                    }).then(res => {
                        if (res.data.code === ERR_OK) {
                            this.$message.success(res.data.msg);
                            this.getData();
                        } else {
                            this.$$message.error(res.data.msg);
                        }
                    });
                })
                .catch(() => {});
        },
        getData() {
            this.loading = true;
            this.$ajax({
                method: "post",
                url: this.GLOBAL.oaService + "/invoice/find",
                data: this.formData
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.tableData = res.data.data.data;
                    this.total = res.data.data.total;
                }
                this.loading = false;
                this.$refs.scrollTable.scrollShow(this.$refs.table);
            });
        },
        onSubmit(formData) {
            this.formData = formData;
            if (formData.typeId !== 2) {
                this.formData.billingCompany = "";
            }
            this.getData();
        },
        isUpdate(status) {
            if (this.fileItem.status === 0) {
                this.update(status);
            } else {
                this.$confirm("是否重新改变状态", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        this.update(status);
                    })
                    .catch(() => {});
            }
        },
        update(status) {
            this.$ajax({
                method: "post",
                url: this.GLOBAL.oaService + "/invoice/update",
                data: {
                    id: this.fileItem.id,
                    status: status
                }
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.getData();
                    this.showViewer = false;
                    this.$message.success(res.data.msg);
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
        // 标题背景颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        }
    },
    components: {
        pagination,
        scrollTable,
        addInvetory
    }
};
</script>
<style lang="stylus" scoped>
.el-table {
    margin-top: 10px;
}

.preview {
    cursor: pointer;
    text-decoration: underline;
    color: #409eff;
}
</style>